<template>
  <div class="main-container">
    <div class="main">
      <div class="main-header">
        <!-- <el-input placeholder="搜索学校或者专业" v-model="search">
            <el-button 
            slot="append" 
            icon="el-icon-search" 
            type="primary"
            @click="searchFor"
            ></el-button>
        </el-input> -->
        <a-auto-complete
          v-model="value"
          :data-source="dataSource"
          style="width: 400px;height:40px"
          placeholder="请输入学校名称"
          @change="onChange"
        />
        <a-button type="primary" icon="search" @click="searchFor">搜索</a-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: '',
      dataSource: []
    }
  },
  methods: {
    searchFor() {
      
    },
    onChange(v) {
      this.$http2({
        url:'/searchSch',
        method:'post',
        data:{
          content:v
        }
      }).then(res => {
          this.dataSource = res.data.map(item => {
            return item.name
          })
        })
    }
  }
}
</script>

<style lang="less" scoped>
.main-container {
  // margin: 20px 60px 0;
  .main-header {
    display: flex;
    justify-content: center;
    height: 40px;
    span {
      margin-right: 15px;
      line-height: 40px;
      width: 120px;
      border: 1px solid #ccc;
    }
    .el-input {
      width: 500px;
    }
  }
  .el-button {
    border-left: none;
    width: 70px;
  }
}
</style>